<!-- 个人信息-更换头像 子路由组件-elementUI的Card 卡片实现页面制作 -->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>更换头像</span>
      </div>
      <div>
        <!-- 用作用户的默认头像 -->
        <img v-if="avatar" :src="avatar" alt="">
        <img v-else src="../../assets/images/avatar.jpg" alt="">
        <!-- 按钮区 -->
        <div class="btn-box">
          <!-- accept="image/*"为指定的图片上传类型为全部 -->
          <!-- :disabled="avatar===''"为动态控制按钮的点击状态 -->
          <input type="file" accept="image/*" style="display:none" ref="iptRef" @change="onFileChange">
          <el-button type="primary" @click="chooseImg"><i class="el-icon-plus"></i>选择图片</el-button>
          <el-button type="success" :disabled="avatar===''" @click="uploadFn"><i class="el-icon-upload"></i>上传头像</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
// 1.引入更新用户头像的接口
import { updateUserAvatarAPI } from '@/api/index'
export default {
  name: 'my-userAvatar',
  data() {
    return {
      avatar: ''
    }
  },
  methods: {
    // 选择图片-》点击事件
    chooseImg() {
      // 目的:为了让input[type=file]标签,让它代用JS代码来触发他的点击事件(原因:原生的样式不好看)
      this.$refs.iptRef.click() // 模拟点击事件
    },
    // 选择图片-确定-》点击事件(这个事件有什么作用?)
    onFileChange(e) {
      console.log(e) // 原生的事件对象
      // 获取用户选择的文件列表（伪数组）
      const files = e.target.files
      if (files.length === 0) {
        // 没有选择图片
        this.avatar = '' // 保存图片链接/base64字符串
      } else {
        // 选择了图片(默认一个,如果想选择多个需要加额外的属性)
        // console.log(files[0])
        // 目标:给img图片实现上传预览(外链http://或文件相对路径,或者base64字符串)
        // 解决方案:
        // 1.文件转内存临时地址(这个地址只能js里用不能发给后台)
        // 语法:URL.createObjectURL(文件) 返回值:内存临时变量
        // this.avatar = URL.createObjectURL(files[0])

        // 2.文件转base64字符串(此字符串可以发送给后台)
        // 语法如下:
        // (1). 创建 FileReader 对象
        const fr = new FileReader()
        // (2). 调用 readAsDataURL 函数,读取文件内容
        fr.readAsDataURL(files[0])
        // (3). 监听 fr 的 onload 事件
        fr.onload = e => {
          // (4). 通过 e.target.result 获取到读取的结果，值是字符串（base64 格式的字符串）
          this.avatar = e.target.result
        }
      }
    },
    // 点击上传头像
    async uploadFn() {
      // 1.调用上传头像的接口
      const { data: res } = await updateUserAvatarAPI(this.avatar)
      // 2.失败,提示用户
      if (res.code !== 0) return this.$message.error(res.message)
      // 3.成功,提示用户
      this.$message.success({
        message: `${res.message}`,
        duration: 2000,
        customClass: 'windthClass'
      })
      // 4.重新让vuex获取最新的用户信息数据
      this.$store.dispatch('getUserInfoActions')
    }
  }
}
</script>

<style lang="less" scoped>
.clearfix span {
  font-size: 16px;
  font-weight: 700;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  background-color: rgba(242, 242, 242, 0.6);
}
.btn-box {
  margin-top: 10px;
  margin-left: 30px;
}
img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
}
i {
  margin-right: 5px;
}
</style>
